import React, { Component, FC, useRef, useState } from 'react'
import '../css/mine.css'
import { Button, Popup, Space, Swiper, Toast } from 'antd-mobile'
import { getBanner } from '../request/api'

export default class Mine extends Component {
    constructor(){
        super()
        this.state={
            pic:[],
        }
    }
    render() {
        const colors = this.state.pic
        const items = colors.map((index) => (
            <Swiper.Item key={index}>
                <div
                    style={{ width:'300px',height:'100px',margin:'0 auto'}} 
                >
                  <img src={index} alt="" style={{width:'100%',height:'100%' }} />
                </div>
            </Swiper.Item>
        ))
        return (
            <div className='mine'>
                <div className='title'>
                    <div className='tl' onClick={() => { this.before() }}>&gt;</div>
                    <div className="tr">商品分类</div>
                    <button className='mrrr' onClick={() => this.logout()}>退出</button>
                </div>
                <div className="mine-top">
                    <div className="top-one">
                        <img src="/04.png" alt="" />
                        <div className="name">
                            <span>代用名</span>
                            <span>完善资料让小U更懂您</span>
                        </div>
                        <div className="envelope">
                            <img src="/red_envelopes.png" alt="" />
                            <span>每日签到</span>
                        </div>
                    </div>
                    <div className="top-two">
                        <div className="collection">
                            <span>12</span>
                            <span>我的收藏</span>
                        </div>
                        <div className="collection">
                            <span>12</span>
                            <span>浏览记录</span>
                        </div>
                        <div className="collection">
                            <span>12</span>
                            <span>我的红包</span>
                        </div>
                        <div className="collection">
                            <span>12</span>
                            <span>优惠券</span>
                        </div>
                    </div>
                    <div className="my-order">
                        <div className="m-o">
                            <span>我的订单</span>
                            <span>全部订单&gt;</span>
                        </div>
                        <div className="m-t">
                            <div className="m-tb">
                                <img src="/payment.png" alt="" />
                                <span>待付款</span>
                            </div>
                            <div className="m-tb">
                                <img src="/payment.png" alt="" />
                                <span>待发货</span>
                            </div>
                            <div className="m-tb">
                                <img src="/payment.png" alt="" />
                                <span>待确认</span>
                            </div>
                            <div className="m-tb">
                                <img src="/payment.png" alt="" />
                                <span>售后/退款</span>
                            </div>
                        </div>

                    </div>
                </div>
                <Swiper autoplay>{items}</Swiper>
            </div>
        )
    }

    logout() {
        sessionStorage.removeItem('user');
        this.props.history.push('/login')
    }
    before() {
        this.props.history.go(-1)
    }
    componentDidMount(){
        if (!JSON.parse(sessionStorage.getItem('user'))) {
            this.props.history.push('/phonelogin')
        }else{
            getBanner().then(res=>{
                // console.log(res.list);
                let obj=[]
                res.list.map(item=>{
                    obj.push(this.$pregImg+item.img)
                })
                this.setState({pic:obj})
                console.log(this.state.pic);
            })
        }
        
    }
}
